<template>
 <div id="home">
   <nav-bar class="home-nav">
     <div slot="center">购物街</div>
   </nav-bar>
   <tab-control :items="titles" @tabClick="pTabClick" ref="tabControl1" :class="{tabTwo:isTabTop}" v-show="isTabTop"></tab-control>
   <Scroll ref="scroll" class="home-scroll" :propsType="3" @scrollPosition="scrollPosition"
           :pullUpLoad="true" @pullUp="loadMore">
     <swiper :sBanners="banners" @imgIsLoad="imgIsLoad"></swiper>
     <rec-view :recommends="recommend"></rec-view>
     <feature-view></feature-view>
     <tab-control :items="titles" @tabClick="pTabClick" ref="tabControl2"></tab-control>
     <GoodsList :goods="goods[this.currentType].list"></GoodsList>
   </Scroll>
<!--   监听组件根元素的原生事件，必须添加native-->
   <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
 </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import {getHomeMultidata , getHomeData} from "network/home";
import Swiper from "components/common/swiper/Swiper";
import RecView from "./childComps/RecView";
import FeatureView from "./childComps/FeatureView";
import TabControl from "components/contents/tabcontrol/TabControl";
import GoodsList from "components/contents/gods/GoodsList";
import Scroll from "components/common/scroll/Scroll";
import {debounce} from 'common/utils'
import {backTopMixin} from "common/mixin";


export default {
  name: "Home",
  components: {Swiper, NavBar,RecView,FeatureView,TabControl,GoodsList,Scroll},
  mixins:[backTopMixin],
  data(){
    return {
      banners:[],
      recommend:[],
      titles:['流行','新款','精选'],
      tableOffsetTop:0,
      goods:{
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]},
      },
      currentType:'pop',
      // isShowBackTop: false,
      isTabTop:false
    }
  },
  // 在页面创建完请求数据
  created() {
    // 请求多个数据
    getHomeMultidata().then(res=>{
      // console.log(res);
      this.banners=res.data.banner.list;
      this.recommend=res.data.recommend.list;
    });

    // 请求goods数据
    this.getHomeData('pop');
    this.getHomeData('new');
    this.getHomeData('sell');

  },
  mounted() {
    // 监听图片以加载完成
    const refresh=debounce(this.$refs.scroll.refresh,200)
    this.$bus.$on('imgLoad',()=>{
      // 防抖操作，避免refresh频繁的调用
      // 节流操作，
      refresh()
    })

  },
  // 封装成一个函数再去created内部进行调用
  methods:{
    // 判断轮播图图片是否加载完成
    imgIsLoad(){
      // console.log('======')
      // 获取offsettop数据
      // 所有的组件都有一个属性$el:用于获取组件中的元素
      // console.log(this.$refs.tabControl.$el.offsetTop)
      this.tableOffsetTop=this.$refs.tabControl2.$el.offsetTop;
    },
    loadMore(){
      this.getHomeData(this.currentType);
    },
    scrollPosition(position){
      this.listenShowBackTop(position);

      // 判断是否吸顶
      this.isTabTop=((-position.y)>this.tableOffsetTop);
    },
    backClick(){
      this.$refs.scroll.scrollTo(0,0,2000)
    },
    getHomeData(type){
      const page=this.goods[type].page+1;
      getHomeData(type,page).then(res=>{
        // console.log(res.data.list);
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page+=1;

        // 完成上拉加载更多
        this.$refs.scroll.finishPullUp();
      })
    },
    pTabClick(index){
      // console.log(index)
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      this.$refs.tabControl1.currentIndex=index;
      this.$refs.tabControl2.currentIndex=index;
    },

  }
}
</script>

<!--scoped限制了样式的作用域-->
<style scoped>
  #home {
    padding-top: 44px;
    /*vh是视口高度*/
    height: 100vh;
    position: relative;
  }
  .home-nav {
    background-color: var(--color-tint);
    color: #ffffff;
    /*font-size: 20px;*/
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9;
  }
  .home-scroll {
    position: absolute;
    top: 44px;
    bottom: 49px;
    right: 0;
    left: 0;
    overflow: hidden;
  }
  .tabTwo {
    position: relative;
    z-index: 8;
  }
</style>
